<template>
  <!-- 在线监测头部 -->
  <div class="onlie-body bigTableStyle">
    <el-form :inline="true" :model="formInline" label-width="1rem">
      <el-row>
        <el-col :span="4" >
          <el-form-item label="单位明称:">
            <el-select v-model="formInline.dwmc" placeholder="单位名称">
              <el-option
                v-for="item in CompanyList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="变电站:">
            <el-select v-model="formInline.bdz" filterable placeholder="变电站">
              <el-option
                v-for="item in SubstationList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="运维班:">
            <el-select v-model="formInline.ywb" placeholder="运维班">
              <el-option
                v-for="item in TeamList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="电压等级:">
            <el-select v-model="formInline.dydj" placeholder="电压等级">
              <el-option
                v-for="item in VoltageList"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="设备分类:">
            <el-select v-model="formInline.sbfl" placeholder="设备分类">
              <el-option
                v-for="item in sbflOptions"
                :key="item.code"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4" >
          <el-form-item label="生产厂家:">
            <el-input v-model="formInline.sccj" placeholder="输入名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="设备名称:">
            <el-input v-model="formInline.sbmc" placeholder="设备名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1">
          <el-form-item label="运行状态:">
            <el-select v-model="formInline.yxzt" placeholder="运行状态">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4" :offset="1" class="btn">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { publicAPIModule } from "@/store/modules/public";
interface optionList {
  value: string;
  label: string;
}
@Component
export default class  IotHead extends Vue {
  private options: Array<optionList> = [
    {
      value: "",
      label: "全部",
    },
    {
      value: "01",
      label: "在线",
    },
    {
      value: "02",
      label: "离线",
    },
  ];
   private sbflOptions: Array<optionList> = [
    {
      label: "辅控设备",
      value: "fksb",
    },
    {
      label: "在线监测",
      value: "zxjc",
    },
    {
      label: "机器人",
      value: "jqr",
    },
    {
      label: "摄像头",
      value: "sxt",
    },
  ];
  private value: string = "";
  private formInline: object = {
    dwmc:'',
    ywb:'',
    bdz:'',
    dydj:'',
    sbmc:'',
    yxzt:'',
    sccj:'',
    sbfl:''
  };

  // private onSubmit() {
  //   alert(this.formInline)
  // }

  // 下拉框单位名称
  get CompanyList() {
    let CompanyList = publicAPIModule.CompanyList || [];
    return CompanyList;
  }
  // 下拉框变电站电压等级
  get VoltageList() {
    let VoltageList = publicAPIModule.VoltageList || [];
    // console.log(VoltageList,'=========================')
    return VoltageList;
  }
  // 下拉框变电站
  get SubstationList() {
    let SubstationList = publicAPIModule.SubstationList || [];
    return SubstationList;
  }
  // 下拉框运维班组
  get TeamList() {
    let TeamList = publicAPIModule.TeamList || [];
    return TeamList;
  }
}
</script>

<style lang='scss' scoped>
.onlie-body {
  // display: flex;
  // flex-direction: row;
  .btn {
    padding-left: 0.3rem;
  }
}
</style>
<style lang="scss">
.onlie-body {
  .el-form-item {
    margin-bottom: 0.05rem;
  }
  .el-form--inline .el-form-item__content {
    width: 55%;
  }
}
</style>

